<template>
  <div id="login">
    <div class="login">
      <h5>欢迎使用</h5>
      <div class="Line"></div>
      <el-input
          @focus="name"
          class="username"
          placeholder="请输入用户名"
          v-model="username">
          <i slot="prefix" class="el-input__icon el-icon-s-custom"></i>
        </el-input>
      <div class="tip">{{usernameTip}}</div>
      <el-input
          @focus="pass"
          placeholder="请输入密码"
          v-model="password"
          show-password>
          <i slot="prefix" class="el-input__icon el-icon-lock"></i>
        </el-input>
      <div class="tip">{{passwordTip}}</div>
      <el-button type="primary" @click="denglu">登录</el-button>
    </div>
    <!-- 自定义弹窗 -->
    <!-- <tanchuang ref="tanchuang"></tanchuang> -->
  </div>
</template>

<script>
  import tanchuang from "../tanchuang/tanchuang.vue";
  export default{
    name: "login",
    components:{
      tanchuang
    },
    mounted() {
      //未登录进入admin界面时
      if(this.$route.params.id == 0){
        this.$message.error("请先登录");
        // this.$refs.tanchuang.dialog("请先登录",true);
      }
      //自动登录
      if(!localStorage.getItem("username")){
        localStorage.setItem("username",null);
      }else if(localStorage.getItem("username") != "null"){
        this.$router.push({
          name:"home",
          //id=2自动登陆成功
          params:{id:2}
        });
      }
    },
    data(){
      return{
        usernameTip:"",
        passwordTip:"",
        username:"",
        password:""
      }
    },
    methods:{
      denglu(){
        if(this.username == ""){
          this.usernameTip = "用户名不能为空";
        }
        if(this.password == ""){
          this.passwordTip = "密码不能为空";
        }
        if(this.username != ""&&this.password != "")
        this.$axios.get(this.API+"/administrator/administratorUser/login",{
          params:{
            account: this.username,
            password: this.password
          }
        }).then((res)=>{
          console.log(res);
          if(res.data.code == 0){
            localStorage.setItem("username",this.username);
            localStorage.setItem("userId",res.data.data.id);
            this.$router.push({
              name:"home",
              //id=1登陆成功
              params:{id:1}
            })
          }else{
            this.$message.error(res.data.msg);
            // this.$refs.tanchuang.dialog(res.data.msg,true);
          }
        })
      },
      pass(){
        this.passwordTip = "";
      },
      name(){
        this.usernameTip = "";
      }
    }
  }
</script>

<style scoped>
  #login{
    height: 100%;
    width: 100%;
    background-image: url(../../image/login_bg2.1b493100.jpg);
  }
  .login{
    background-color: white;
    width: 300px;
    padding: 0 20px 20px;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  .Line{
    border-bottom: 1px solid gainsboro;
    width: 340px;
    position: relative;
    left: -20px;
    top: -5px;
  }
  .username{
    margin-top: 20px;
  }
  .tip{
    height: 20px;
    color: red;
    font-size: 14px;
  }
  .el-button{
    width: 100%;
    margin-top: 7px;
  }
</style>
